<template>
    <el-drawer v-model="visible" :with-header="false" :size="800" append-to-body @closed="$emit('closed')">
        <el-container v-loading="loading">
            <el-main style="padding: 20px 20px 20px 20px">
                <sc-title title="题目详情"></sc-title>
                <scQusetionDetail :question="question"></scQusetionDetail>
            </el-main>
            <el-footer>
                <el-button @click="visible = false">关闭</el-button>
            </el-footer>
        </el-container>
    </el-drawer>
</template>
<script>
export default {
    emits: ["success", "closed"],
    data() {
        return {
            loading: false,
            visible: false,
            moreFlag: false,
            question: {
                type: {},
                options: [
                    { prefix: "A", content: "" },
                    { prefix: "B", content: "" },
                    { prefix: "C", content: "" },
                    { prefix: "D", content: "" },
                ],
                corrects: "",
                analysis: "",
            },
        };
    },
    mounted() { },
    methods: {
        //查看更多
        lookMore() {
            this.moreFlag = !this.moreFlag;
        },
        //显示
        open() {
            this.visible = true;
            return this;
        },
        //表单注入数据
        async setData(row = null) {
            if (row) {
                this.loading = true;
                let res = await this.$API.articleQuestion.action.get({id: row.id}).finally(() => {
                    this.loading = false
                })
                this.question = res.data;
            }
        },
    },
};
</script>

<style scoped>
.el-image__inner {
    object-fit: cover;
}
.title-content {
    line-height: 23px;
    position: relative;
}

.title-content .image-box {
    margin-top: 15px;
}

.title-content .image-box .el-image {
    width: 80px;
    height: 80px;
}

.question-option-tag {
    display: inline-block;
    font-size: 14px;
    border-radius: 11px;
    padding: 2px;
    width: 23px;
    height: 23px;
    line-height: 20px;
    text-align: center;
    background-color: #e4e7ed;
    margin-right: 10px;
}

.question-analysis-title {
    width: 60px;
    margin-top: 10px;
    color: #909399;
}

.question-analysis-content {
    width: calc(100% - 60px);
    margin-top: 10px;
}

.tag-box {
    margin-top: 10px;
}

.el-divider {
    margin: 10px 0;
    background-color: #ebeef5;
}

.customer-divider {
    background-color: #dcdfe6;
}
pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 微软雅黑;
    line-height: 20px;
}
</style>
